import { createElement } from 'rax';
import { Page, Card, Row, Col } from '@alifd/meet-demo-layout';
import { Button } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';


export default function Demo() {
  const types = ['normal', 'primary', 'warning', 'inverse'];
const models = ['solid', 'outline', 'text'];
  return (
    <View>
    {types.map((type) => {
      return (
        <Card title={type} type={type} key={type}>
          <Row>
            {models.map((model) => {
              return (
                <Col key={model}>
                  <Button key={`button-${type}-${model}`} model={model} type={type}>
                    {model}
                  </Button>
                </Col>
              );
            })}
          </Row>
        </Card>
      );
    })}
  </View>
  );
}
